<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <!-- 公告组件 -->
    <div th:fragment="announcement_bell">
        <div class="announcement-bell position-fixed" style="top: 80px; right: 20px; z-index: 1000;">
            <div class="dropdown">
                <button class="btn btn-light rounded-circle position-relative" type="button" id="announcementButton" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-bullhorn"></i>
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none" id="unreadBadge">
                        新
                    </span>
                </button>
                <div class="dropdown-menu dropdown-menu-end p-0" style="width: 300px;">
                    <div class="p-2 border-bottom">
                        <h6 class="mb-0">最新公告</h6>
                    </div>
                    <div class="announcement-list" style="max-height: 300px; overflow-y: auto;">
                        <!-- 公告列表将通过JavaScript动态加载 -->
                    </div>
                    <div class="p-2 border-top text-center">
                        <a href="/announcements" class="text-decoration-none">查看全部</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 公告组件的JavaScript代码 -->
    <script th:fragment="announcement_script">
        let lastAnnouncementId = localStorage.getItem('lastAnnouncementId') || 0;
        let announcementCheckInterval = null;

        // 加载最新公告
        function loadLatestAnnouncements() {
            $.ajax({
                url: '/api/announcements/latest',
                type: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token')
                },
                success: function(response) {
                    const announcementList = $('.announcement-list');
                    announcementList.empty();

                    if (response.length === 0) {
                        announcementList.append(`
                            <div class="p-3 text-center text-muted">
                                暂无公告
                            </div>
                        `);
                        return;
                    }

                    // 检查是否有新公告
                    const latestId = response[0].id;
                    if (latestId > lastAnnouncementId) {
                        $('#unreadBadge').removeClass('d-none');
                        lastAnnouncementId = latestId;
                        localStorage.setItem('lastAnnouncementId', latestId);
                    }

                    response.forEach(announcement => {
                        const date = new Date(announcement.createdAt);
                        const today = new Date();
                        let dateStr = '';

                        if (date.toDateString() === today.toDateString()) {
                            dateStr = date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
                        } else {
                            dateStr = date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' });
                        }

                        announcementList.append(`
                            <a href="/announcement?id=${announcement.id}" class="text-decoration-none">
                                <div class="p-2 border-bottom announcement-item" style="cursor: pointer;">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <h6 class="mb-0 text-truncate" style="max-width: 200px;">${announcement.title}</h6>
                                        <small class="text-muted">${dateStr}</small>
                                    </div>
                                    <p class="mb-0 text-muted small text-truncate">
                                        ${$(announcement.content).text()}
                                    </p>
                                </div>
                            </a>
                        `);
                    });
                }
            });
        }

        // 标记公告为已读
        $('#announcementButton').on('click', function() {
            $('#unreadBadge').addClass('d-none');
        });

        // 初始化公告检查
        function initAnnouncementCheck() {
            loadLatestAnnouncements();
            // 每5分钟检查一次新公告
            announcementCheckInterval = setInterval(loadLatestAnnouncements, 300000);
        }

        // 页面卸载时清除定时器
        $(window).on('unload', function() {
            if (announcementCheckInterval) {
                clearInterval(announcementCheckInterval);
            }
        });

        // 初始化公告组件
        $(document).ready(function() {
            initAnnouncementCheck();
        });
    </script>
</body>
</html> 